packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue (1)

87-89: Avoid fixed height containers

Using a fixed height for the backup items container might cause issues with overflow when there are many backups.

   &__backup-items-container {
-    height: 150px;
+    max-height: 150px;
+    overflow-y: auto;
   }

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue (1)

8-19: 🛠️ Refactor suggestion

Improve accessibility for backup selection.

The backup selection UI needs accessibility improvements:

1. Using anchor tags (<a>) for clickable elements without href
2. Missing proper ARIA attributes
3. No keyboard navigation support

-      <a
+      <button
+        type="button"
+        role="option"
+        :aria-selected="selectedBackup === backup"
+        tabindex="0"
         v-for="backup in backups"
         :key="backup.userId"
         @click="selectBackup(backup)"
         :class="[
           { selected: selectedBackup === backup },
           'backup-detected__backup-item',
         ]"
       >
         {{ new Date(backup.updatedAt).toLocaleString() }}
-      </a>
+      </button>

packages/utils/src/nacl-encrypt-decrypt.ts (1)

35-38: Fix typo in variable naming.

The variable name "recieverPrivateKeyUint8Array"/"recieverEncryptionPrivateKey" is misspelled. Consider renaming it to "receiver" for clarity and consistency.

- const recieverPrivateKeyUint8Array = naclDecodeHex(privateKey);
- const recieverEncryptionPrivateKey = ...
+ const receiverPrivateKeyUint8Array = naclDecodeHex(privateKey);
+ const receiverEncryptionPrivateKey = ...

packages/extension/src/libs/backup-state/index.ts (3)

54-63: Add error handling for failed fetch.

If the network request fails or the response is not OK, this code may throw an unhandled exception. Consider wrapping it in a try/catch or checking response.ok before calling json().

- const rawResponse = await fetch(`${BACKUP_URL}backups/${pubkey}`, {
+ let rawResponse;
+ try {
+   rawResponse = await fetch(`${BACKUP_URL}backups/${pubkey}`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    });
+   if (!rawResponse.ok) {
+     throw new Error(`Failed request with status: ${rawResponse.status}`);
+   }
+ } catch (error) {
+   console.error(error);
+   throw new Error("Could not complete backup retrieval.");
+ }

---

132-135: Consider deferring “continue” with an if/else chain.

The continue statement is flagged as unnecessary by linters. You can restructure the flow with if/else blocks instead of using continue. While this code works, removing or refactoring it might simplify readability.

if (existingAccount && newAccount) {
  console.log('Account already exists, just renaming');
  await kr.renameAccount(existingAccount.address, newAccount.name);
- continue;
} else if (newAccount) {

🧰 Tools

🪛 Biome (1.9.4)

[error] 135-135: Unnecessary continue statement

Unsafe fix: Delete the unnecessary continue statement

(lint/correctness/noUnnecessaryContinue)

---

215-228: Wrap POST request in try/catch for robust error handling.

Like with other network calls, a failure here can result in an unhandled rejection. Consider adding error handling similar to the getBackups method to gracefully handle errors.

- const rawResponse = await fetch(
+ let rawResponse;
+ try {
+   rawResponse = await fetch(
      `${BACKUP_URL}backups/${mainWallet.publicKey}/${state.userId}`,
      {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          payload: encryptedStr,
          signature: JSON.parse(res.result as string),
        }),
      },
    );
+   if (!rawResponse.ok) {
+     throw new Error(`Backup POST request failed: ${rawResponse.status}`);
+   }
+ } catch (error) {
+   console.error(error);
+   return false;
+ }

packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue (2)

78-95: Enhance error handling with user feedback.

The error handling in the backup restoration process could be improved by:

1. Providing specific error messages based on the error type
2. Adding a retry mechanism for failed restorations

 const useBackup = async () => {
   if (selectedBackup.value) {
     backupBtnText.value = 'Restoring backup...';
     processing.value = true;
     await backupState
       .restoreBackup(selectedBackup.value, password)
       .then(() => {
         router.push({
           name: routes.walletReady.name,
         });
       })
-      .catch(() => {
-        backupBtnText.value = 'Failed to restore backup';
+      .catch((error) => {
+        const errorMessage = error?.message || 'Failed to restore backup';
+        backupBtnText.value = errorMessage;
         processing.value = false;
         selectedBackup.value = undefined;
+        // Optional: Add retry mechanism
+        setTimeout(() => {
+          backupBtnText.value = 'Use backup';
+        }, 3000);
       });
   }
 };

---

136-138: Consider dynamic height for backup items container.

The fixed height of 150px for the backup items container might cause overflow issues with many backups.

   &__backup-items-container {
-    height: 150px;
+    max-height: 150px;
+    overflow-y: auto;
   }

packages/extension/src/ui/action/views/accounts/components/add-account-form.vue (1)

124-127: Enhance backup error handling and user feedback.

The backup error handling should:

1. Notify the user of backup success/failure
2. Consider retry mechanism for failed backups
3. Log more detailed error information

     const backupState = new BackupState();
-    backupState.backup(false).catch(() => {
-      console.error('Failed to backup');
-    });
+    backupState.backup(false)
+      .then(() => {
+        // Optional: Notify user of successful backup
+        console.log('Backup successful');
+      })
+      .catch((error) => {
+        console.error('Backup failed:', error);
+        // Optional: Show error notification to user
+        // Optional: Implement retry mechanism
+      });

packages/extension/src/types/provider.ts (1)

134-134: Remove unnecessary constructor.

The constructor is unnecessary as it only contains an empty implementation and doesn't override or extend any parent class functionality.

-  constructor(node: string, options?: unknown) {}

🧰 Tools

🪛 Biome (1.9.4)

[error] 134-134: This constructor is unnecessary.

Unsafe fix: Remove the unnecessary constructor.

(lint/complexity/noUselessConstructor)

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/extension/src/libs/utils/initialize-wallet.ts (1)

69-81: 🛠️ Refactor suggestion

Add specific error handling for unlock operation.

While the try-catch block is good, we should verify the unlock status and handle specific error cases.

  try {
-    await kr.unlock(password);
+    const unlocked = await kr.unlock(password);
+    if (!unlocked) {
+      console.error('Failed to unlock keyring');
+      return { backupsFound: false };
+    }
     const mainAccount = await kr.getNewAccount({

packages/extension/src/libs/utils/initialize-wallet.ts (1)

11-25: Consider extracting the repeated filtering logic.

The test wallet filtering logic is duplicated across all network account retrievals. Consider extracting this into a helper function to improve maintainability and reduce duplication.

+const filterNonTestWallets = async (networkName: NetworkNames) => {
+  const accounts = await getAccountsByNetworkName(networkName);
+  return accounts.filter(acc => !acc.isTestWallet);
+};

-  const secp256k1btc = (
-    await getAccountsByNetworkName(NetworkNames.Bitcoin)
-  ).filter(acc => !acc.isTestWallet);
+  const secp256k1btc = await filterNonTestWallets(NetworkNames.Bitcoin);

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue (1)

47-52: Consider using more secure methods to clear sensitive data.

While clearing sensitive data is good practice, using empty strings might not be the most secure approach. Consider using secure string overwriting or dedicated secure memory clearing functions.

Example approach:

 onMounted(() => {
-  onboardStore.setPassword('');
-  onboardStore.setMnemonic('');
-  restoreStore.setMnemonic('');
-  restoreStore.setPassword('');
+  // Use a secure string overwriting approach
+  const securelyOverwrite = (str: string) => {
+    if (typeof str === 'string') {
+      const buffer = new Uint8Array(str.length);
+      crypto.getRandomValues(buffer);
+      return String.fromCharCode.apply(null, buffer);
+    }
+    return '';
+  };
+  
+  onboardStore.setPassword(securelyOverwrite(onboardStore.password));
+  onboardStore.setMnemonic(securelyOverwrite(onboardStore.mnemonic));
+  restoreStore.setMnemonic(securelyOverwrite(restoreStore.mnemonic));
+  restoreStore.setPassword(securelyOverwrite(restoreStore.password));
 });

packages/extension/src/ui/onboard/create-wallet/store.ts (1)

15-15: Consider adding TypeScript types for store values.

Adding explicit types for the store's return values would improve type safety and developer experience.

+interface OnboardStore {
+  mnemonic: Ref<string>;
+  password: Ref<string>;
+  setMnemonic: (mnemonic: string) => void;
+  setPassword: (password: string) => void;
+}

-  return { mnemonic, password, setMnemonic, setPassword };
+  return { mnemonic, password, setMnemonic, setPassword } as OnboardStore;

packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue (1)

1-16: Add component documentation.

Add JSDoc comments to document the component's purpose and functionality.

Add documentation at the top of the file:

+/**
+ * Settings Backups Component
+ * 
+ * Provides interface for managing wallet backups.
+ * Allows users to enable/disable automatic backups and manage backup settings.
+ */
 <template>

packages/extension/src/ui/action/views/settings/index.vue (1)

131-145: Fix duplicate height property in CSS.

The settings__wrap class has two height declarations. The second one overrides the first one.

Remove the duplicate height property:

   &__wrap {
     background: @white;
     box-shadow:
       0px 3px 6px rgba(0, 0, 0, 0.039),
       0px 7px 24px rgba(0, 0, 0, 0.19);
     border-radius: 12px;
     box-sizing: border-box;
     width: 460px;
-    height: auto;
     z-index: 107;
     position: relative;
     height: 568px;
     overflow-x: hidden;
     padding-bottom: 16px;
   }

packages/extension/src/libs/backup-state/types.ts (2)

7-11: Consider modern TypeScript naming conventions.

The I prefix for interfaces is an older convention. Modern TypeScript style guides recommend dropping the I prefix.

-export interface IState {
+export interface State {
   lastBackupTime: number;
   userId: string;
   enabled: boolean;
 }

---

13-17: Consider using Date type for updatedAt.

The updatedAt property represents a date/time value. Consider using the Date type for better type safety and to leverage built-in date manipulation methods.

 export interface BackupType {
   userId: string;
   payload: string;
-  updatedAt: string;
+  updatedAt: Date;
 }

packages/extension/src/libs/backup-state/index.ts (1)

33-47: Consider extracting wallet filter logic and improving error message.

The wallet filtering logic could be extracted into a separate method for better readability. Also, the error message could be more descriptive.

 async getMainWallet(): Promise<EnkryptAccount> {
   const pkr = new PublicKeyRing();
   const allAccounts = await pkr.getAccounts();
-  const mainWallet = allAccounts.find(
-    acc =>
-      acc.walletType === 'mnemonic' &&
-      acc.pathIndex === 0 &&
-      acc.signerType === 'secp256k1' &&
-      acc.basePath === EthNetwork.basePath,
-  );
+  const mainWallet = allAccounts.find(this.isMainWallet);
   if (!mainWallet) {
-    throw new Error('No main wallet found');
+    throw new Error('No main wallet found. Ensure a mnemonic wallet with index 0 exists.');
   }
   return mainWallet;
 }
+
+private isMainWallet(acc: EnkryptAccount): boolean {
+  return (
+    acc.walletType === 'mnemonic' &&
+    acc.pathIndex === 0 &&
+    acc.signerType === 'secp256k1' &&
+    acc.basePath === EthNetwork.basePath
+  );
+}

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/extension/src/libs/backup-state/configs.ts (1)

1-5: Consider environment-based configuration.

Consider using environment variables for the backup URL to support different environments (development, staging, production).

packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue (1)

15-47: Enhance table accessibility.

Add ARIA labels and roles to improve table accessibility:

-    <table>
+    <table role="grid" aria-label="Current Backups">

packages/extension/src/libs/backup-state/index.ts (1)

209-211: Remove unnecessary continue statement.

The continue statement at line 210 is unnecessary and can be removed.

 if (existingAccount && newAccount) {
   console.log('Account already exists, just renaming');
   await kr.renameAccount(existingAccount.address, newAccount.name);
-  continue;
 }

🧰 Tools

🪛 Biome (1.9.4)

[error] 210-210: Unnecessary continue statement

Unsafe fix: Delete the unnecessary continue statement

(lint/correctness/noUnnecessaryContinue)

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro